<template>
  <div class="main-container">
    <el-row>
      <el-button type="primary" @click="addAuthority()">添加权限</el-button>
      <el-button type="primary" @click="create()">刷新</el-button>
      <el-button type="danger" @click="flushApiReq()">接口重置（慎点）</el-button>
    </el-row>
    <br />
    <el-row>
      <el-col :span="10">
        <div>
          <el-table :data="authorityList" border>
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="authorityName" label="权限" align="center" min-width="120"></el-table-column>
            <el-table-column prop="authorityObj" label="对象" align="center" min-width="100"></el-table-column>
            <el-table-column label="操作" align="center" min-width="250">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="modifyAuthority(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="removeAuthority(scope.row)">删除</el-button>
                <el-button size="mini" type="primary" @click="apiCheckInit(scope.row)">接口变更</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="14">
        <div class="pl10" v-if="apiChangeVisible">
          <el-form>
            <el-form-item>
              <el-button size="mini" class="w120 ml10" type="primary">权限用户</el-button>
              <el-button size="mini" class="w120" v-for="(user, index) in authorityUserList" :key="index">{{ user }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" class="w120 ml10" type="primary">权限角色</el-button>
              <el-button size="mini" class="w75" v-for="(role, index) in authorityRoleList" :key="index">{{ role }}</el-button>
            </el-form-item>
          </el-form>
          <el-button size="mini" class="ml10" type="primary" @click="saveAuthorityApi()">保存</el-button>
          <el-button size="mini" class="ml10" type="primary" @click="resetChange()">重置</el-button>
          <el-button size="mini" class="ml10" @click="cancelChange()">取消</el-button>
          <br />
          <br />
          <el-table :data="apiCheckList" border class="ml10">
            <el-table-column label="选择" align="center" width="50">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.selected"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="apiName" label="接口" align="left" min-width="120" sortable></el-table-column>
            <el-table-column prop="apiUrl" label="URL" align="left" min-width="200" sortable></el-table-column>
            <el-table-column prop="apiMethod" label="方法" align="center" width="75"></el-table-column>
            <el-table-column prop="apiClass" label="实现类" align="left" min-width="200" sortable></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 弹框：新建/修改权限弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="20%" :close-on-click-modal="false" @close="closeDialog()">
      <el-form :model="authority">
        <el-form-item label="权限名称">
          <el-input v-model="authority.authorityName"></el-input>
        </el-form-item>
        <el-form-item label="权限对象">
          <el-input v-model="authority.authorityObj"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveAuthorityReq()">保存</el-button>
          <el-button @click="closeDialog()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Notification } from 'element-ui'
// 权限模块接口
import { getApiListApi, getAuthorityListApi, saveAuthorityApi, removeAuthorityApi, saveAuthorityApiApi, flushApiApi } from '@/api/authority/api-authority'

@Component({})
export default class AuthorityManager extends Vue {
  /***********************************************************************
   * 页面初始化 ***********************************************************
   *********************************************************************** */
  create() {
    this.getApiList()
    this.getAuthorityList()
  }

  // 系统权限列表
  authorityList: any = []
  // 系统接口列表
  apiList: any = []

  // 获取权限列表
  async getAuthorityList() {
    await getAuthorityListApi({ rich: true })
      .catch(err => Notification.error(err))
      .then((res: any) => (this.authorityList = res.data))
  }
  // 获取接口列表
  async getApiList() {
    await getApiListApi({})
      .catch(err => Notification.error(err))
      .then((res: any) => (this.apiList = res.data))
  }
  /*************
   * 页面初始化 *
   *********** */
  /*************************************************************************
   * 权限管理功能：添加/修改/删除 ********************************************
   *********************************************************************** */
  // 新建/修改弹框标题
  dialogTitle: string = ''
  // 新建/修改弹框可见控制
  dialogVisible: boolean = false
  // 新建/修改弹框 数据绑定对象
  authority: any = {
    authorityId: -1,
    authorityName: '权限名称',
    authorityObj: '权限对象'
  }

  // 新建权限
  addAuthority() {
    // 实际上打开新建权限的弹框
    this.dialogTitle = '新增权限'
    this.authority = {
      authorityId: -1,
      authorityName: '',
      authorityObj: ''
    }
    this.dialogVisible = true
  }

  // 修改权限
  modifyAuthority(authority) {
    // 实际上打开修改权限的弹框
    this.dialogTitle = '修改权限'
    this.authority = {
      authorityId: authority.authorityId,
      authorityName: authority.authorityName,
      authorityObj: authority.authorityObj
    }
    this.dialogVisible = true
  }

  // 保存新建/修改：判断交给后端去做（根据ID）
  async saveAuthorityReq() {
    await saveAuthorityApi(this.authority)
      .then(() => {
        this.closeDialog()
        this.getAuthorityList()
      })
      .catch(err => Notification.error(err))
  }

  // 新建/修改弹框关闭
  closeDialog() {
    this.authority = {
      authorityId: -1,
      authorityName: '权限名称',
      authorityObj: '权限对象'
    }
    this.dialogVisible = false
  }

  // 删除权限
  removeAuthority(authority) {
    this.$confirm('请确认删除：' + authority.authorityName, '删除权限', {
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    }).then(() => this.removeAuthorityReq(authority.authorityId))
  }
  async removeAuthorityReq(authorityId) {
    await removeAuthorityApi({ authorityId: authorityId })
      .then(() => this.getAuthorityList())
      .catch(err => Notification.error(err))
  }

  /******************************
   * 权限管理功能：添加/修改/删除 *
   **************************** */
  /*************************************************************************
   * 权限接口管理 ***********************************************************
   *********************************************************************** */

  // 拥有该权限的用户列表
  authorityUserList: any = []
  // 拥有该权限的角色列表
  authorityRoleList: any = []
  // 当前变更权限
  currentAuthority: any = {}
  // 接口修改区域绑定数据
  apiCheckList: any = []
  // 接口修改区域可见控制
  apiChangeVisible: boolean = false

  apiCheckInit(authority) {
    this.apiChangeVisible = true
    this.currentAuthority = authority
    this.authorityUserList = authority.userList
    this.authorityRoleList = authority.roleList
    // 绑定已选接口
    this.apiCheckList = this.apiList.map(api => {
      if (this.currentAuthority.apiIds.indexOf(api.apiId) != -1) {
        this.$set(api, 'selected', true)
      } else {
        this.$set(api, 'selected', false)
      }
      return api
    })
  }

  // 保存权限接口设置
  saveAuthorityApi() {
    let selectedApiIds: any = []
    for (let au of this.apiCheckList) {
      if (au.selected == true) {
        selectedApiIds.push(au.apiId)
      }
    }
    let params = {
      authorityId: this.currentAuthority.authorityId,
      apiIds: selectedApiIds
    }
    this.$confirm('请确认保存权限接口的修改', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    }).then(() => this.saveAuthorityApiReq(params))
  }
  async saveAuthorityApiReq(param) {
    await saveAuthorityApiApi(param)
      .then(() => {
        this.getAuthorityList()
        this.cancelChange()
      })
      .catch(err => Notification.error(err))
  }
  // 重置权限接口设设置
  resetChange() {
    this.apiCheckInit(this.currentAuthority)
  }
  // 取消角色权限设置
  cancelChange() {
    this.apiChangeVisible = false
    this.apiCheckList = []
    this.authorityRoleList = []
    this.authorityUserList = []
    this.currentAuthority = {}
  }
  /***************
   * 权限接口管理 *
   ************* */
  /*************************************************************************
   * 重置系统接口 ***********************************************************
   *********************************************************************** */
  async flushApiReq() {
    await flushApiApi({})
      .then(() => this.create())
      .catch(err => Notification.error(err))
  }
  /***************
   * 重置系统接口 *
   ************* */
  /*************************************************************************
   * ***********************************************************************
   *********************************************************************** */
}
</script>

<style lang="scss" scoped>
</style>
